﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <!--此页面实现Word图片自动批量上传的功能-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WordPaster For KindEditor-3.x</title>
    <link type="text/css" rel="Stylesheet" href="demo.css" />
    <link type="text/css" rel="Stylesheet" href="WordPaster/js/skygqbox.css" />
    <script type="text/javascript" src="kindeditor-min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/json2.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/jquery-1.4.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/skygqbox.js" charset="utf-8"></script>
    <script type="text/javascript" src="WordPaster/js/w.js" charset="utf-8"></script>
	<script type="text/javascript" src="zyCapture/z.js" charset="utf-8"></script>
    <script type="text/javascript" src="zyOffice/js/o.js" charset="utf-8"></script>
    <script type="text/javascript" src="vue.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="demo.js" charset="utf-8"></script>
</head>
<body>
    <div style=" font-size:medium; line-height:130%;">
        <p>演示方法：</p>
        <ul style="list-style-type:decimal;">
            <li>打开Word文档，复制多张图片，通过Ctrl + V 粘贴到编辑器中，编辑器将自动上传所有图片。</li>
            <li>复制电脑中任意图片文件，然后点击编辑器中的粘贴图片按钮<img alt="粘贴图片" src="WordPaster/css/paster.png" width="16px" height="16px" />。</li>
            <li>通过QQ或其它软件截屏，复制图片，然后点击编辑器中的图片粘贴按钮<img alt="粘贴图片" src="WordPaster/css/paster.png" width="16px" height="16px" />。</li>
        </ul>
        <p>相关问题：</p>
        <ul style="list-style-type:decimal;">
            <li>安装插件<a target="_blank" href="http://www.ncmem.com/webapp/wordpaster/pack.aspx">下载插件</a></li>
            <li>WindowxXP/Windows7/Windows2003如果无法识别数字证书，请先下安装<a target="_blank" href="http://www.ncmem.com/download/WoSignRootUpdate.rar">数字签名根证书</a></li>
        </ul>
    </div>
    <div id="demos"></div>    
    <!--KindEditor编辑器-->
    <div id="kind">
        <kindeditor ref="kind"></kindeditor>
    </div>
    <script>
        Vue.component('kindeditor', {
            data: function(){
                return {
                    editor: null
                }
            },
            props: {
                value: '',
                config: {}
            },
            mounted: function(){
                var pos = window.location.href.lastIndexOf("/");
                var api = [
                    window.location.href.substr(0, pos + 1),
                    "asp.net/upload.aspx"
                ].join("");
                WordPaster.getInstance({
                    //上传接口：http://www.ncmem.com/doc/view.aspx?id=d88b60a2b0204af1ba62fa66288203ed
                    PostUrl: api,
                    //为图片地址增加域名：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
                    ImageUrl: "",
                    //设置文件字段名称：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45
                    FileFieldName: "file",
                    //提取图片地址：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1
                    ImageMatch: '',
                    event: {
                        dataReady: function (e) {
                            //e.word,
                            //e.imgs:tag1,tag2,tag3
                            console.log(e.imgs)
                        }
                    }
                });//加载控件
		
                //zyCapture
                zyCapture.getInstance({
                    config: {
                        PostUrl: api,
                        FileFieldName: "file",
                        Fields: { uname: "test" }
                    }
                });

                //zyoffice
                //使用前请在服务端部署zyOffice，
                //http://www.ncmem.com/doc/view.aspx?id=82170058de824b5c86e2e666e5be319c
                zyOffice.getInstance({
                    word:"http://localhost:13710/zyoffice/word/convert",
                    wordExport:"http://localhost:13710/zyoffice/word/export",
                    pdf:"http://localhost:13710/zyoffice/pdf/upload"
                });

                KE.show({
                    id: 'editor'
                    , imageUploadJson: '../../asp.net/upload_json.ashx'
                    , fileManagerJson: '../../asp.net/file_manager_json.ashx'
                    , allowFileManager: true
                    , cssPath: './index.css'
                    , items: 
                        ['source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste','plainpaste', 'wordpaste','|',
                        'zycapture','|',
                        'imagepaster', 'importwordtoimg', 'netpaster', 'wordimport', 'excelimport', 'pptimport', 'pdfimport', '|',
                        'importword','exportword','importpdf','|',
                        'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript','superscript', '|', 'selectall', '-',
                        'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'removeformat', '|', 
                        'image','flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about']
                    , afterCreate: function (id) {
                        //初始化
                        WordPaster.getInstance().SetEditorID(id);
                        window.zyCapture.setEditor(id);
                        window.zyOffice.SetEditor(id);
                    }
                });
            },
            methods: {},
            destroyed: function(){},
            template: '<div><textarea id="editor" name="editor" style="width:100%;height:300px;visibility:hidden;"/><p>泽优全平台内容发布解决方案 for asp.net kindeditor3</p><p>泽优Word一键粘贴控件（WordPaster）</p><p>泽优全平台截屏控件（zyCapture）</p><p>泽优Office文档转换服务（zyOffice）</p></div>'
        });

        var kind = new Vue({
            el: '#kind',
            data: {
            }
            , mounted: function () {
            }
        });
    </script>
</body>
</html>